<template>
  <el-dialog v-model="dialogVisible" width="600px" draggable :show-close="false" :close-on-click-modal="false">
    <template #title>
      <div class="custom-header">
        <span>{{ title }}</span>
        <div class="rigth-btn">
          <el-icon @click="close"><Close /></el-icon>
        </div>
      </div>
    </template>
    <el-scrollbar>
      <div :class="formBody" style="justify-content: center">
        <slot />
      </div>
    </el-scrollbar>
    <template v-if="footer" #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="saveSubmit" v-if="showSure">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { Close } from '@element-plus/icons-vue'
import { ref, watch, defineEmits, defineProps } from 'vue'
const props = defineProps({
  modelValue: {
    type: Boolean,
    require: true,
    default: false
  },
  title: {
    type: String,
    default: ''
  },

  footer: {
    type: Boolean,
    default: true
  },
  saveSubmit: {
    type: Function,
    default: () => {
      return Function
    }
  },
  showSure: {
    type: Boolean,
    default: true
  }
})

const dialogVisible = ref(props.modelValue)
const title = ref(props.title)
const formBody = ref('form-body')

const emits = defineEmits(['update:modelValue', 'saveSubmit'])

const close = () => {
  dialogVisible.value = false
  emits('update:modelValue', false)
}

const saveSubmit = () => {
  emits('saveSubmit', props.saveSubmit)
}

watch(() => props.modelValue, (value, o) => {
  dialogVisible.value = value
})
</script>

<style lang="scss">
.custom-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 40px;
}

.custom-header .right-btn {
  height: 40px;
  cursor: pointer;
}

.custom-header .right-btn .el-icon {
  margin-right: 10px;
  height: 100%;
}

.custom-header .right-btn .el-icon:hover {
  color: #fff000;
}

.form-body {
  padding-right: 20px;
  height: 500px;
  margin-bottom: 52px;
}

.form-body-new {
  padding-right: 120px;
  height: 750px;
  margin-bottom: 52px;
}

.el-scrollbar {
  margin-bottom: 30px;
  align-items: center;
  align-content: center;
  justify-content: center;

}
</style>
